<html>
<head>
<link rel="stylesheet" href="css/popup.css">
<script src="js/jquery.js"></script>
<script>
function submitForm(){
   //get the description
   var description = document.getElementById("description").value;
   var colors = document.newTimeMark.color
   for(i=0;i<colors.length;i++){
      if(colors[i].checked == true)
         color = colors[i].value;
   }
  
  chrome.extension.sendRequest({
        'action' : 'addTimeMark',
        'description': description,
        'color' : color
     },function(response){
        document.getElementById('addForm').innerHTML="TimeMark added!";
        setTimeout("window.close();",2000);
     });
  return false;
}

function viewTimeMarks(){
   chrome.extension.sendRequest({'action' : 'viewTimeMarks'});
   window.close();
}

$(document).ready(function() {
   $("input[name='color']").change(function(){
      $(".color_label").removeClass("chosen");
      var colors = document.newTimeMark.color
      for(i=0;i<colors.length;i++){
         if(colors[i].checked == true)
            $('label[for="color_'+ colors[i].value+'"]').addClass("chosen");
      }
   });
});
</script>
</head>
<body>
   <div class="popup_hold">
      <div class="timemark_hold">
         <span class="timemark">TimeMark</span>
         <a onClick="viewTimeMarks();" href="#" class="view_timemark">View TimeMarks</a>
         <div class="clear"></div>
      </div>
      <div id="addForm">
        <img src="images/timeMarkClock/clockface_128.png" width="96" align="left" id="clock_image" /> 
        <form onsubmit="submitForm(); return false;" name="newTimeMark" >
           <div class="color_choices">
              
              <input type="radio" name="color" value="red" id="color_red" checked="checked" />
                <label for="color_red" class="color_label chosen">
                   <img src="images/timeMarkMarks/timemark_32_red.png" width="16" height="16" />
                </label>
                
               <input type="radio" name="color" value="black" id="color_black" />
                 <label for="color_black" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_black.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="blue" id="color_blue" />
                 <label for="color_blue" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_blue.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="darkBlue" id="color_darkBlue" />
                 <label for="color_darkBlue" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_darkBlue.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="darkGreen" id="color_darkGreen" />
                 <label for="color_darkGreen" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_darkGreen.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="green" id="color_green" />
                 <label for="color_green" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_green.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="orange" id="color_orange" />
                 <label for="color_orange" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_orange.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="purple" id="color_purple" />
                 <label for="color_purple" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_purple.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="silver" id="color_silver" />
                 <label for="color_silver" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_silver.png" width="16" height="16" />
                 </label>

               <input type="radio" name="color" value="yellow" id="color_yellow" />
                 <label for="color_yellow" class="color_label">
                    <img src="images/timeMarkMarks/timemark_32_yellow.png" width="16" height="16" />
                 </label>
              </div>
          <div class="description">
             <input name="description" id="description" type="text" placeholder="Please describe this moment" />
            </div>
            <div class="submit_area">
              <input type="button" value="Cancel" onclick="window.close();" class="cancel" /> 
              <input name="submit" id="submit" type="submit" value="Save" />
              </div>
    
          
      
        </form>
      </div>
</div>
</body>
</html>